<template>
  <div id="app">
    
      
   
    <transition :name="switchTransition">
      <router-view/>
    </transition>

 
    
  </div>
  
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      switchTransition:'onefade',
     
    }
  },
  mounted(){
      if (localStorage.getItem("name")!= null) {
        console.log(localStorage.getItem("name"));
        const options = {
          method: 'GET',
          headers: {
            "Content-Type": 'application/json'
          }
        }
        fetch(`http://8.130.95.37:8085/getUser2/${localStorage.getItem("name")}`, options).then(res => res.json()).then(res => {
          console.log(res[0]);
          this.$store.state.udate=res[0]
        }).catch(err => {
          console.log(err)
        })
        
        fetch(`http://8.130.95.37:8085/getFriends/${localStorage.getItem("name")}`, options).then(res => res.json()).then(res => {
          console.log(res);
          this.$store.state.Friendslist=res
        }).catch(err => {
          console.log(err)
        })
      }
    },
    watch:{
      $route(to,from){
        const isBack = this.$router.isBack;
          if (from.meta.leavel && to.meta.leavel) {
            // 说明是一级到一级
            this.switchTransition = "onefade";
          } else if (!to.meta.leavel) {
            // 说明到的是二级
            this.switchTransition = "twofade";
          }
          if (isBack) {
            this.switchTransition = "threefade";
          }
        this.$router.isBack = false; //监听路由后重置 isBack 用于判断如何跳转动画；
      }
    },
    
   

 

}
</script>

<style >
*{
  margin: 0px;
  padding: 0px;
}
#app{
  width:100%;			
  height:100%;			
  position:fixed;
  background-size:100% 100%;
  background-color: #EDEDED;
}
/* 一级动画 其实没有动画效果 直接切换 主要是为了菜单栏的切换 */
.onefade-enter {
  opacity: 0;
}
.onefade-enter-active,
.onefade-leave-active {
  transition: all 0;
}
.onefade-leave-to {
  opacity: 0;
}



.twofade-enter-active,
.twofade-leave-active {
  transition: all 0.5s;
  position: absolute;
  width: 390px;
  height: 100%;
}

.twofade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.twofade-enter{
  opacity: 0;
  transform: translateX(100%);
}


/* 点击返回按钮执行的 enter leave动画 */

.threefade-enter-active,
.threefade-leave-active {
  transition: all 0.5s;
  position: absolute;
  width: 390px;
  height: 100%;
}
.threefade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.threefade-enter {
  opacity: 0;
  transform: translateX(-100%);
}


</style>
